<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-08 16:13:54
 * @LastEditTime: 2023-02-16 10:19:13
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 添加附件
 * @Motto: Write the code. Change the world.
-->

<template>
  <a-drawer
    :title="'新增' + title"
    :maskClosable="false"
    :visible="visible"
    :width="450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-form layout="vertical">
      <a-form-item :label="title + '名称'" v-bind="validateInfos.name">
        <a-input placeholder="请输入" v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item
        label="上传附件"
        v-bind="validateInfos.file_path"
        v-if="params.annex_type == 2"
      >
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="false"
          :action="$utils.fileAction"
          :headers="{ 'org-token': $store.getters.token }"
          :showUploadList="false"
          @change="handleUploadChange"
          accept=".doc,.docx"
          :data="{ dir: 'org_contract_add_attachments' }"
        >
          <template v-if="fileList.length">
            <p class="ant-upload-drag-icon">
              <FileTextOutlined />
            </p>
            <p class="ant-upload-text">
              {{ fileList[0].name }}
            </p>
          </template>
          <template v-else>
            <p class="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p class="ant-upload-text">
              拖拽文件至虚线款内或点击此区域上传文件
            </p>
            <p class="ant-upload-hint">文档只支持doc、docx格式</p>
          </template>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { computed, defineComponent, watch, ref, reactive, toRaw } from "vue";
import { Form, message } from "ant-design-vue";
import { FileTextOutlined, InboxOutlined } from "@ant-design/icons-vue";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {
        return {
          annex_type: 1,
          parent_id: 0,
        };
      },
    },
  },
  components: { FileTextOutlined, InboxOutlined },
  setup(props, context) {
    const title = computed(() => {
      return props.params.annex_type == 1 ? "文件夹" : "文件";
    });

    const modelRef = reactive({
      name: "",
    });
    const rule = [{ required: true, message: "必填" }];
    const rulesRef = reactive({
      name: rule,
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const fileList = ref([]);
    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      resFileList = resFileList.slice(-1);
      fileList.value = resFileList;
      const result = fileList.value[0];
      if (result && result.response) {
        if (result.response.code == 1000) {
          modelRef.file_path = result.response.data.fileUrl;
        } else {
          message.warning(result.response.msg);
        }
      }
    };

    const closeModal = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      validate().then(() => {
        request
          .post("/org", "/contract/annexAdd", {
            ...props.params,
            name: modelRef.name,
            annex_source: 1,
            file_path: modelRef.file_path,
            needMsg: true,
          })
          .then((res) => {
            message.success(res.msg || "添加成功");
            context.emit("success");
          });
      });
    };
    const init = () => {
      if (props.params.annex_type == 2) {
        modelRef.file_path = "";
        rulesRef.file_path = rule;
      } else {
        delete modelRef.file_path;
        delete rulesRef.file_path;
      }
    };
    const reset = () => {
      resetFields();
      fileList.value = [];
    };
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      modelRef,
      validateInfos,
      title,
      fileList,
      closeModal,
      onSubmit,
      handleUploadChange,
    };
  },
});
</script>
<style lang="less" scoped>
.ant-upload-text {
  color: @primary-color !important;
}
</style>
